<template>
 <div style="width:100%;height:100%">
    <van-grid  :column-num="columnNum" :border="false">
      <van-grid-item :class="[index===id?'checkColor':'']" style="cursor:pointer" v-for="(value,index) in bottomData" :key="index" @click="click(value,index)" >
        <div>
          <mobile-icon
            v-if="value.icon"
            slot="prefix"
            :icon-class="value.icon"
            class="el-input__icon"
            style="height: 32px; width: 20px"
          />
          <mobile-icon
            v-else
            slot="prefix"
            icon-class="tupian"
            class="el-input__icon"
            style="height: 32px; width: 20px"
          />
        </div>
        <span class="name" :title="value.name" :style="{'width': columnNum<=3?'95px':(columnNum===4?'70px':'50px') }">
          {{value.name}}
        </span>
      </van-grid-item>
    </van-grid>
 </div>
</template>
<script>

export default {
  props: {
    columnNum:{
      type: Number,
      default: "",
    },
    bottomData:{
      type:Array,
      default:function(){
        return [];
      }
    },
    tabind:{
      type: Number,
      default: 0,
    }
  },
  data() {
    return {
      id:0
    };
  },
  mounted() {
  },
  watch: {
    bottomData:{
      handler(val){
        //  console.log(val)
      }
    },
    tabind:{
      handler(val){
       this.id = val;
       console.log(val,'vvv');
      },
      immediate:true
    }
  },
  methods: {
    click(value,index){ 
      this.id = index
      this.$emit('currentTitle',value.jumpPath)
    }
  },
};
</script>

<style lang="scss" scoped>
  .name {
    text-align: center;
    color:#000000;
    overflow-x:hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    // -webkit-line-clamp: 1;
    // -webkit-box-orient: vertical;
  }
  .checkColor{
    color: #1890FF !important;
  }
</style>